<template>
	<u-popup :show="visible" :closeable="true" :safeAreaInsetBottom="false" round="10" @close="$emit('cancel')">
		<view class="pl-30 pr-30 pt-90">
			<view class="flex">
				<image class="width-160 height-160 shrink0" :src="productData.image"></image>
				<view class="flex justify-between flex-column ml-20 w-100">
					<view class="fweigh-600 fsize-34">{{ productData.name }}</view>
					<view class="flex justify-between">
						<view class="line-red" v-if="!productData.isSetMenu">
							<text class="fsize-26">￥</text>
							<!-- <text class="fsize-36 fweigh-600">{{ productData.activityPrice || unitPrice }}</text> -->
							<text class="fsize-36 fweigh-600">{{ materialsOtherData.vipPrice || materialsOtherData.price }}</text>
							<text v-if="productData.FUnitName" class="ml-10 fsize-30 line-gray">/ {{ productData.FUnitName }}</text>
						</view>
						<actions v-if="!productData.isSetMenu" :number="productData.number" @add="add" @minus="minus"></actions>
					</view>
				</view>
			</view>
			<view class="fsize-24 line-gray mt-40 line-height-28 fweight-500">{{ productData.description || '' }}</view>
			<!-- 商品规格start -->
			<scroll-view scroll-y class="scroll-view">
				<view class="materials" v-for="(material, index) in productData.materials" :key="index">
					<view class="group-name" v-if="material.values.length > 0">{{ material.group_name }}</view>
					<view class="values" v-if="material.values.length > 0">
						<view class="value" :class="{ selected: value.is_selected }" @tap="changeMaterialSelected(index, key)" v-for="(value, key) in material.values" :key="key">
							{{ value.fName }}
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="bottom">
				<view class="add-cart-btn" @tap="addToCart">
					<!-- <text style="margin-right: 10rpx;">
						<text class="fsize-20">原价￥</text>
						<text class="fsize-24">{{getPrice}}</text>
					</text>  style="color: #ed4d4f;"-->
					<text>
						<!-- <text class="fsize-24">{{productData.activityPrice? '加购价': '会员价'}}￥</text> -->
						<text class="fsize-24">￥</text>
						<text>{{ getPrice }}</text>
					</text>
					<text class="ml-10">加入购车</text>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
import { mapState } from 'vuex';
import Actions from '../actions/actions.vue';
export default {
	name: 'ProductPopup',
	components: {
		Actions
	},
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		product: {
			// 传入的数据有规格和当前菜的数据 规格和做法 materials
			type: Object,
			default: () => {}
		},
		materialsOtherData: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			productData: {}
		};
	},
	watch: {
		product(val) {
			// 转换数据
			console.log(val);
			this.productData = JSON.parse(JSON.stringify(val)); // 父传子数据，当前商品数据
			if (this.productData.number) return;
			this.$set(this.productData, 'number', 1); // 当前商品动态添加数量
		}
	},
	computed: {
		...mapState(['userInfo']),
		// 商品单价
		unitPrice() {
			if (this.userInfo.id && this.productData.vipPrice !== 0) {
				// 判断有无会员
				return this.productData.vipPrice;
			} else {
				return this.productData.price;
			}
			// if (!this.productData.vipPrice) {
			// 	// 没有会员价
			// 	if (this.productData.materials) {
			// 		const list = this.productData.materials[0].values
			// 		// 在 JSON 数据中查找 is_selected 属性为 true 的对象
			// 		const selectedValue = list.find(value => value.is_selected);
			// 		return selectedValue.fPosPrice
			// 	} else {
			// 		return this.productData.price
			// 	}
			// } else {
			// 	// 有会员价
			// 	if (this.productData.materials) {
			// 		const list = this.productData.materials[0].values
			// 		// 在 JSON 数据中查找 is_selected 属性为 true 的对象
			// 		const selectedValue = list.find(value => value.is_selected);
			// 		return selectedValue.vipPrice
			// 	} else {
			// 		return this.productData.vipPrice
			// 	}
			// }
		},
		// 单个商品的总价
		getPrice() {
			const data = this.productData;
			if (this.productData.activityPrice) {
				// 如果有加购价
				if (data.materials) {
					const selectedItems = []; // 用于存储选中的项
					for (const group of data.materials) {
						for (const value of group.values) {
							if (value.is_selected) {
								selectedItems.push(value.fPosPrice);
							}
						}
					}
					selectedItems.splice(0, 1);
					const price = selectedItems.reduce((total, itemPrice) => total + itemPrice, 0) + data.activityPrice;
					return (price * data.number).toFixed(2);
				} else {
					// 有会员没规格start
					return (data.activityPrice * data.number).toFixed(2);
				}
			}
			// console.log(data);
			if (this.userInfo.id) {
				// 有会员价
				if (data.materials) {
					const selectedItems = []; // 用于存储选中的项
					// const externalPrice = data.FPosPrice; // 外部的 price
					for (const group of data.materials) {
						for (const value of group.values) {
							if (value.is_selected) {
								if (value.vipPrice !== 0) {
									// 有优惠
									selectedItems.push(value.vipPrice);
								} else {
									selectedItems.push(value.fPosPrice);
								}
							}
						}
					}
					// 将选中项的价格与外部 price 相加
					// const price = selectedItems.reduce((total, itemPrice) => total + itemPrice, externalPrice);

					const price = selectedItems.reduce((total, itemPrice) => total + itemPrice, 0);
					return (price * data.number).toFixed(2);
				} else {
					// 有会员没规格start
					if (data.vipPrice) {
						return (data.vipPrice * data.number).toFixed(2);
					} else {
						return (data.price * data.number).toFixed(2);
					}
					// 有会员没规格end
				}
			} else {
				// 没优惠
				if (data.materials) {
					const selectedItems = []; // 用于存储选中的项
					// const externalPrice = data.FPosPrice; // 外部的 price
					for (const group of data.materials) {
						for (const value of group.values) {
							if (value.is_selected) {
								selectedItems.push(value.fPosPrice);
							}
						}
					}
					// 将选中项的价格与外部 price 相加
					// const price = selectedItems.reduce((total, itemPrice) => total + itemPrice, externalPrice);
					const price = selectedItems.reduce((total, itemPrice) => total + itemPrice, 0);
					return (price * data.number).toFixed(2);
				} else {
					// if(data.vipPrice) {
					// 	return (data.vipPrice * data.number).toFixed(2)
					// } else {
					return (data.price * data.number).toFixed(2);
					// }
				}
			}
		},

		// getPrice() {
		// 		if (data.price && data.materials) {
		// 			const selectedItems = []; // 用于存储选中的项
		// 			// const externalPrice = data.FPosPrice; // 外部的 price
		// 			for (const group of data.materials) {
		// 				for (const value of group.values) {
		// 					if (value.is_selected) {
		// 						selectedItems.push(value.fPosPrice);
		// 					}
		// 				}
		// 			}
		// 			// 将选中项的价格与外部 price 相加
		// 			// const price = selectedItems.reduce((total, itemPrice) => total + itemPrice, externalPrice);
		// 			const price = selectedItems.reduce((total, itemPrice) => total + itemPrice);
		// 			return (price * data.number).toFixed(2)
		// 		} else {
		// 			return (data.price * data.number).toFixed(2)
		// 		}
		// 	},
		getProductSelectedMaterials() {
			if (!this.productData.is_single && this.productData.materials) {
				let materials = [];
				this.productData.materials.forEach(({ values }) => {
					values.forEach((value) => {
						if (value.is_selected) {
							materials.push(value.FName);
						}
					});
				});
				return materials.length ? materials.join('，') : '';
			}
			return '';
		}
	},
	methods: {
		changeMaterialSelected(index, key) {
			const currentMaterial = this.productData.materials[index].values[key]; //materials每一项规格中的其中一个规格
			// 判断单选还是多选
			if (currentMaterial.selectType === 1) return;
			if (!currentMaterial.is_exclusive) {
				if (currentMaterial.is_selected) return;
				this.productData.materials[index].values.forEach((value) => this.$set(value, 'is_selected', 0));
				currentMaterial.is_selected = 1;
				if (index === 0) {
					this.productData.FFoodSpecID = currentMaterial.fItemID;
				}
			} else {
				currentMaterial.is_selected = !currentMaterial.is_selected;
				// if(index === 1){
				// 	this.productData.feed_ids = this.productData.materials[1].values.filter(im => im.is_selected).map(jm => jm.fItemID)
				// }else if(index === 2){
				// 	this.productData.tast_ids = this.productData.materials[2].values.filter(im => im.is_selected).map(jm => jm.fItemID)
				// }
			}
		},
		add() {
			this.productData.number += 1;
		},
		minus() {
			if (this.productData.number == 1) {
				return;
			}
			this.productData.number -= 1;
		},
		addToCart() {
			// console.log(this.productData.materials);
			if (this.productData.materials && !this.productData.isSetMenu) {
				this.productData.feed_ids = this.productData.materials[1].values.filter((im) => im.is_selected).map((jm) => jm.fItemID);
				this.productData.tast_ids = this.productData.materials[2].values.filter((im) => im.is_selected).map((jm) => jm.fItemID);
			}
			// 菜品详细里面的套菜的加料和做法
			if (this.productData.materials && this.productData.isSetMenu) {
				this.productData.feed_ids = this.productData.materials[0].values.filter((im) => im.is_selected).map((jm) => jm.fItemID);
				this.productData.tast_ids = this.productData.materials[1].values.filter((im) => im.is_selected).map((jm) => jm.fItemID);
				this.productData.price = this.getPrice;
			}
			const product = {
				...this.productData
			};
			// console.log(this.productData);
			this.$emit('add-to-cart', product);
		}
	}
};
</script>

<style lang="scss" scoped>
.popup-cancel {
	padding: 20rpx;
	display: flex;
	justify-content: flex-end;
	opacity: 0.2;
}

.scroll-view {
	display: flex;
	flex-direction: column;
	font-size: 24rpx;
	color: #777;
	border-top: 1px #ededed solid;
	padding-top: 40rpx;
	margin-top: 40rpx;
	min-height: 1vh;
	max-height: calc(100vh - 100rpx - 426rpx - 250rpx);

	.materials {
		margin-bottom: 20rpx;

		.group-name {
			padding: 10rpx 0;
		}

		.values {
			display: flex;
			flex-wrap: wrap;
			overflow: hidden;

			.value {
				background-color: #f5f5f7;
				color: 26rpx;
				padding: 10rpx 20rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				border-radius: 12rpx;

				&.selected {
					background-color: #e0a32d;
					color: #fff;
				}
			}
		}
	}
}

.bottom {
	padding: 0 40rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: #fff;
	position: relative;
	z-index: 11;

	.add-cart-btn {
		height: 90rpx;
		line-height: 90rpx;
		margin-top: 20rpx;
		font-size: 30rpx;
		text-align: center;
		font-weight: bold;
		color: #111111;
		background: linear-gradient(34deg, #f3c45d, #edac2f);
		border-radius: 45rpx;
	}
}
</style>
